<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>05实现三级下拉菜单</title>
</head>
<script type="text/javascript">
    window.onload=function(){
//        var isIE=!!window.ActiveXObject;
//        var isIE6=isIE&&window.XMLHttpRequest;
//        if(isIE6){
            var Lis=document.getElementsByTagName("li");
            for(var i=0;Lis.length;i++){
                Lis[i].onmouseover=function(){
                    var u=this.getElementsByTagName("ul")[0];
                    if(u!=undefined){
                        u.style.display="block";
                    }
                }
                Lis[i].onmouseout=function(){
                    var u=this.getElementsByTagName("ul")[0];
                    if(u!=undefined){
                        u.style.display="none";
                    }
                }
            }
//        }
    }
</script>
<style type="text/css">
    body{

    }
    #nav{font-size:12px;font-weight:bold;list-style: none;overflow: auto;}
    #nav li{ float: left;margin-left: 1px;}
    #nav li a{line-height:20px;text-decoration: none;background-color:#ddd;text-align:center;display: block;color: #666;width: 80px;}
    #nav li ul{display: none;list-style: none;padding: 0;position: relative}
    #nav li ul li{margin-top: 2px;}
   /* #nav li:hover ul{display: block;width: 80px;}
    #nav li:hover ul li ul{display: none;}
    #nav li  ul li:hover ul {display: block;position: absolute;left:80px;top:0px}*/

    #nav li:hover ul{width: 80px;}
    #nav li  ul li:hover ul {position: absolute;left:80px;top:0px;}
</style>
<body>
    <ul id="nav" >
        <li><a href="#">首页</a></li>
        <li>
            <a href="#">一级菜单</a>
            <ul>
                <li><a href="#">二级菜单</a>
                    <ul>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                    </ul>
                </li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li>
            <a href="#">一级菜单</a>
            <ul>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单</a></li>
        <li><a href="#">一级菜单</a></li>
    </ul>
</body>
</html>